<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/layui/css/layui.css">
<script type="text/javascript" src="/layui/layui.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 修改 -->
<div id="div_xiuGai" style="display:none">
	<form id="form_xiuGai" class="layui-form" action="" onsubmit="return false" lay-filter="form_food">	
		<input type="hidden" name="Id" value=""/>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-inline">
				<input type="text" name="LoginName" class="layui-input layui-disabled"
					lay-verify="required" lay-verify="number" autocomplete="off"
					placeholder="" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-inline">
				<input type="text" name="ProtectEMail" 
					 lay-verify="email" autocomplete="off"
					placeholder="请输入" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号</label>
			<div class="layui-input-inline">
				<input type="text" name="protectMTel" 
					 lay-verify="phone" autocomplete="off"
					placeholder="请输入" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="update">修改</button>
			</div>
		</div>
		</form>
	</div>

	<div id="div_id" style="display:none">
		<form id="form_id" class="layui-form" action="" onclick="return false">	
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="LoginName" id="LoginName1" lay-verify="required"
							lay-verify="title" autocomplete="off" placeholder="请输入用户名"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="text" name="ProtectEMail" id="ProtectEMail" lay-verify="email"
							lay-verify="title" autocomplete="off" placeholder="请输入邮箱"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-block">
						<input type="text" name="protectMTel" id="protectMTel" lay-verify="required|phone"
							lay-verify="title" autocomplete="off" placeholder="请输入手机号"
							class="layui-input">
					</div>
				</div>				
				
				<div class="layui-inline">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="add">添加</button>
					</div>
				</div>
			</div>

		</form>
	</div>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" id="LoginName" name="LoginName" lay-verify="title"
						autocomplete="off" placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">是否锁定</label>
				<div class="layui-input-block">
					<select id="IsLockout" lay-filter="aihao">
						<option value=""></option>
						<option value="是">是</option>
						<option value="否">否</option>

					</select>
				</div>
			</div>
			
			<div class="layui-inline">
				<label class="layui-form-label">创建时间</label>
				<div class="layui-input-inline">
					<input type="text" id="beginCreateTime" name="beginLastLoginTime" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" >
					<input type="text" id="endCreateTime" name="endCreateTime" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-block">
					<select id="paixu" lay-filter="aihao">
						<option value=""></option>
						<option value="2">结束时间</option>
						<option value="1">创建时间</option>

					</select>
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="demo1">搜索用户</button>
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="tianjia">创建用户</button>
			</div>
			</div>
		</div>

	</form>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="jiechu">解除锁定</a>
  <a class="layui-btn layui-btn-xs" lay-event="suoding">锁定</a>
  <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
  <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="barDemo1">
  <a class="layui-btn layui-btn-xs" lay-event="shezhi">设置</a>
</script>
	<table id="demo" lay-filter="test"></table>
 <div style="display:none" id="test1" ></div>
<script>
	layui.use(['table','form','laydate','transfer'], function(){
	  var table = layui.table;
	  var form=layui.form;
	  var laydate=layui.laydate;
	  var transfer = layui.transfer;
	  var $=layui.$;
	    laydate.render({
   			 elem: '#beginCreateTime' //指定元素
  		});
  		laydate.render({
   			 elem: '#endCreateTime' //指定元素
  		});
  		laydate.render({
   			 elem: '#CreateTime' //指定元素
  		});
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,id:'table_id'
	    ,url: '/users/getUsers' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'Id', title: 'ID', sort: true, fixed: 'left'}
	      ,{field: 'LoginName', title: '用户名',width:150}
	      ,{field: 'IsLockout', title: '是否锁定',width:80}
	      ,{field: 'CreateTime', title: '创建时间'} 
	      ,{field: 'ProtectEMail', title: '邮箱'}
	      ,{field: 'protectMTel', title: '手机号'}
	      ,{field: 'LastLoginTime', title: '最后登录'}
	      ,{fixed: 'right',width:50,title: '角色设置', align:'center', toolbar: '#barDemo1'}
	      ,{fixed: 'right',width:350,title: '操作', align:'center', toolbar: '#barDemo'}
	    ]]
	  });
	  //gmw
	  form.on('submit(demo1)',function(){	  	
	  		 table.reload('table_id',{
			  	where:{
			  		LoginName:$("#LoginName").val(),
			  		beginCreateTime:$("#beginCreateTime").val(),
			  		endCreateTime:$("#endCreateTime").val(),
			  		IsLockout:$("#IsLockout").val(),
			  		paixu:$("#paixu").val()
			  	}
	 		 })
	 	 return false;
	  })
	   form.on('submit(tianjia)',function(){
	   		layer.open({
	   			type:1,
	   			content:$("#div_id"),
	   			area:["350px","300px"]
	   		})
	   		return false;
	   })
	  form.on('submit(add)',function(){
	   		$.post("/users/addUsers",$("#form_id").serialize(),function(res){
	   			if(res.code=="0"){
	   				layer.closeAll();
	   				table.reload("table_id");
	   				layer.msg(res.msg);
	   			}else{
	   				layer.msg(res.msg);
	   			}
	   		},"json")
	   })
	   //ytt
	   //工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'jiechu'){ //解除锁定
  layer.confirm('确定解除锁定么？', function(index){
	$.post("/users/isLockout",{
		Id: data.Id,
		IsLockout: data.IsLockout,
		suoDing: '否'
	},function(res){
		if(res.code=="0"){
	   		layer.msg(res.msg);
		}else if(res.code=="1"){
			layer.closeAll("page");
	   		table.reload("table_id");
	   		layer.msg(res.msg);
		}else{
			layer.msg(res.msg);
		}
	},"json");
	});
  } else if(layEvent === 'suoding'){ //锁定
  layer.confirm('确定锁定么？', function(index){
  	$.post("/users/isNoLockout",{
		Id: data.Id,
		IsLockout: data.IsLockout,
		suoDing: '是'
	},function(res){
		if(res.code=="0"){
	   		layer.msg(res.msg);
		}else if(res.code=="1"){
			layer.closeAll("page");
	   		table.reload("table_id");
	   		layer.msg(res.msg);
		}else{
			layer.msg(res.msg);
		}
	},"json");
	});
  } else if(layEvent === 'update'){ //编辑
  		 form.val("form_food",data);
   		layer.open({
	   			type:1,
	   			content:$("#div_xiuGai"),
	   			area:["350px","300px"]
	   		})
  }else if(layEvent === 'shezhi'){ //设置
	  		 //form.val("form_food",data);
	  		 $("#test1").attr("userid",data.Id);
	  		 
	   		layer.open({
		   			type:1,
		   			content:$("#test1"),
		   			title: '【'+data.LoginName+'】角色设置'
		   			,area:["500px","500px"]
		   		})
		   		setRole();
	  } else if(layEvent === 'reset'){
  	    layer.confirm('确定重置密码么？', function(index){
	      $.post("/users/chongZhiMiMa",{
				Id: data.Id
			},function(res){
				if(res.code=="0"){
			   		layer.closeAll("page");
			   		table.reload("table_id");
			   		layer.msg(res.msg);
				}else{
					layer.msg(res.msg);
				}
			},"json");
	      layer.close(index);
	      //向服务端发送删除指令
	    });
  }else if(layEvent === 'del'){//删除
  	    layer.confirm('确定删除么？', function(index){
	      $.post("/users/delUsers",{
				Id: data.Id
			},function(res){
				if(res.code=="0"){
			   		layer.msg(res.msg);
				}else if(res.code=="1"){
			   		layer.closeAll("page");
			   		table.reload("table_id");
			   		layer.msg(res.msg);
				}else if(res.code=="2"){
			   		layer.msg(res.msg);
				}
			},"json");
	      layer.close(index);
	      //向服务端发送删除指令
	    });
  }
});
//xiugai
	form.on('submit(update)',function(){
	   		$.post("/users/updUsers",$("#form_xiuGai").serialize(),function(res){
	   			if(res.code=="0"){
			   		layer.closeAll("page");
			   		table.reload("table_id");
			   		layer.msg(res.msg);
				}else{
					layer.msg(res.msg);
				}
	   		},"json");
	   		return false;
	   })
	    //角色设置
	   var setRole = function(){
	   var data_role = [];
	   var data_uesrId_roleId = [];
	   $.post("/roles/getAllRoles",{},function(res){
	   //console.log(res.data);
	   		for(var i=0;i<res.data.length;i++){
	   			var obj = {};
	   			obj.value=res.data[i].Id;
				obj.title=res.data[i].Name;
	   			data_role.push(obj);
	   			 //console.log(data_role);
	   		}
	   		//根据用户id查询角色id
	   		//console.log($("#test1").attr("userid"))
	   		$.post("/roles/getUserIdByRolesId",{
				Id:$("#test1").attr("userid")
			},function(obj){
				//console.log(obj.data);
				//渲染
		    transfer.render({
		      elem: '#test1'  //绑定元素
		      ,title: ['所有角色', '用户角色']
		      ,data: data_role
		      ,value: obj.data
		      ,id: 'demo1' //定义索引
		        ,onchange: function(data, index){
				    //console.log(data); //得到当前被穿梭的数据
				    //console.log(index); //如果数据来自左边，index 为 0，否则为 1
				    var ids = []
				    $(data).each(function(i,item){
				    	ids.push(item.value)
				    })
				    //console.log(ids.join())
				    if(index == 0){
				    	$.post("/roles/addUserRoles",{
				    		UserId: $("#test1").attr("userid"),
				    		RoleIds: ids.join()
				    	},function(res){
				    		layer.msg(res.msg);
				    	},"json");
				    }else{
				    	$.post("/roles/delUserRoles",{
				    		UserId: $("#test1").attr("userid"),
				    		RoleIds: ids.join()
				    	},function(res){
				    		layer.msg(res.msg);
				    	},"json");
				    }
				  }
		    });
			},"json");
	   },"json");
	   }
	});
</script>
</body>
</html>